<template>
	<el-container class="home-contain">
		<el-header>
			<div style="width: 290px;">
				<img width="50px" height="50px" class="logo" src="../assets/tushuguanlogo.jpg" alt="logo">
				<span class="title">后台管理系统</span>
			</div>
			<div class="user">欢迎您:
				<el-avatar :src="this.$store.state.avatarImg"></el-avatar>
				<el-dropdown @command="handleCommand">
					<span class="el-dropdown-link">
						<span class="userInfo">{{userName}}<i class="el-icon-arrow-down"></i></span>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item icon="el-icon-rank" command="full">{{iFullscreen?'退出全屏':'全屏显示'}}</el-dropdown-item>
						<el-dropdown-item icon="el-icon-switch-button" divided command="logout">退出账户</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</el-header>
		<el-container>
			<el-aside :width="isCollapse?'64px':'200px'">
				<div class="toggleBar" @click="toggle"><i :class="[flag?'el-icon-s-operation':'el-icon-more']"></i></div>
				<el-menu background-color="#001529" active-text-color="#ffffff" text-color="#969696" unique-opened :collapse="isCollapse"
				 :collapse-transition="false" router :default-active="$route.path">
					<!-- 解决头像路由和左侧路由不一致 -->
					<el-submenu :index="item.id +''" v-for="item in menuList" :key="item.id">
						<template slot="title">
							<i :class="iconObj[item.id]"></i>
							<span>{{item.name}}</span>
						</template>
						<el-menu-item v-for="subItem in  item.children" :key="subItem.id" :index="'/'+subItem.path" @click="saveNav('/'+subItem.path)">
							<template><i class="el-icon-menu"></i>{{subItem.name}}</template>
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				//菜单渲染
				menuList: {},
				// 标识符
				flag: true,
				iconObj: {
					'1': 'el-icon-user',
					'2': 'iconfont icon-baobiao'
				},
				//欢迎对象
				userName: '',
				isCollapse: false,
				// 激活标签
				activePath: '',
				iFullscreen:false//全屏
			}
		},
		created() {
			//获取用户姓名
			this.getUserName();
			this.getMenuList();
		},
		methods: {
			// 下拉框触发事件
			handleCommand(command) {
				switch (command) {
					case "full":
						this.full()
						break;
					case "logout":
						this.logout();
						break;
				}
			},
			async getUserName() {
				let {
					data: data
				} = await this.$http.get(`/api/users/getOneInfo?params=nickname,img_url`);
				this.userName = data.data[0].nickname;
				this.$store.commit('name', data.data[0].nickname)
				this.$store.commit('changeImg', data.data[0].img_url)
			},

			async getMenuList() {
				const {
					data: data
				} = await this.$http.get(`/api/users/meau`)
				this.menuList = data.data;
			},
			logout() {
				this.$confirm('退出该系统?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					window.sessionStorage.clear();
					this.$router.replace('/login')
					this.$message({
						type: 'success',
						message: '已安全退出'
					});
				}).catch(() => {
				});
			},
			toggle() {
				this.isCollapse = !this.isCollapse
				this.flag = !this.flag
			},
			saveNav(activepath) {
				window.sessionStorage.setItem('activePath', activepath);
			},
			full() {
				var fullscreenEnabled = document.fullscreenEnabled ||
					document.mozFullScreenEnabled ||
					document.webkitFullscreenEnabled ||
					document.msFullscreenEnabled;

				if (fullscreenEnabled) {
					let de = document.documentElement;
					if (this.iFullscreen) {
						//关闭全屏
						if (document.exitFullscreen) {
							document.exitFullscreen();
						} else if (document.mozCancelFullScreen) {
							document.mozCancelFullScreen();
						} else if (document.webkitCancelFullScreen) {
							document.webkitCancelFullScreen();
						}
						this.iFullscreen = false
					} else {
						//打开全屏
						if (de.requestFullscreen) {
							de.requestFullscreen();
						} else if (de.mozRequestFullScreen) {
							de.mozRequestFullScreen();
						} else if (de.webkitRequestFullScreen) {
							de.webkitRequestFullScreen();
						}
						this.iFullscreen = true
					}
				} else {
					this.$message.error('浏览器当前不能全屏');
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.home-contain {
		height: 100%;

		.logo {
			margin-top: 10px;
		}
	}

	.title {
		color: white;
		font-size: 25px;
		position: relative;
		top: -17px;
		margin-left: 30px;
	}

	.el-header {
		display: flex;
		width: 100%;
		justify-content: space-between;
		background: #001529;
		align-items: center;

		.user {
			display: flex;
			font-size: 18px;
			line-height: 45px;
			margin-right: 30px;
			color: white;

			.userInfo {
				color: red;
				font-size: 20px;

				.el-icon-arrow-down {
					color: white
				}
			}
		}
	}

	.el-aside {
		background: #001529;
		transition: all .5s;

		.el-menu {
			border: none;

			.el-submenu {
				transition: all .5s;
			}
		}

		.el-menu-item.is-active {
			background-color: #1890ff !important;
		}
	}

	.el-main {
		background: #EAEDF1;
		position: relative;
	}

	.toggleBar {
		background: #001529;
		font-size: 10px;
		line-height: 24px;
		color: #fff;
		text-align: center;
		letter-spacing: 0.3em;
		cursor: pointer;
	}

	.el-icon-arrow-down {
		transition: all 1.5s;
	}

	.el-icon-arrow-down:hover {
		transform: rotate(360deg);
	}
</style>
